<!--<template>-->
<!--  <border title="协同任务" :close="true" w="420px" h="520px" @close="$emit('close')" style="left: 630px;top:30%">-->
<!--    <div class="collaborPage">-->
<!--      &lt;!&ndash; 任务标题 &ndash;&gt;-->
<!--      <div class="form-item">-->
<!--        <label class="form-label">任务标题</label>-->
<!--        <el-input-->
<!--          v-model="taskTitle"-->
<!--          placeholder="请输入任务标题"-->
<!--          clearable-->
<!--          size="small">-->
<!--        </el-input>-->
<!--      </div>-->

<!--      &lt;!&ndash; 任务内容 &ndash;&gt;-->
<!--      <div class="form-item">-->
<!--        <label class="form-label">任务内容</label>-->
<!--        <el-input-->
<!--          v-model="taskContent"-->
<!--          type="textarea"-->
<!--          :rows="3"-->
<!--          placeholder="请输入详细的任务内容"-->
<!--          resize="none"-->
<!--          size="small">-->
<!--        </el-input>-->
<!--      </div>-->

<!--      &lt;!&ndash; 用户选择列表 &ndash;&gt;-->
<!--      <div class="form-item">-->
<!--        <label class="form-label">参与人员</label>-->
<!--        <div class="user-selector">-->
<!--          <div class="user-list">-->
<!--            <div-->
<!--              class="user-item"-->
<!--              v-for="user in users"-->
<!--              :key="user.userId"-->
<!--              :class="{-->
<!--                selected: selectedUsers.includes(user.userId),-->
<!--                leader: leaderId === user.userId-->
<!--              }"-->
<!--              @click="toggleUserSelection(user.userId)">-->

<!--              <div class="user-avatar">-->
<!--                <img-->
<!--                  v-if="user.headIcon"-->
<!--                  :src="user.headIcon"-->
<!--                  :alt="user.realName"-->
<!--                  onerror="this.src=''">-->
<!--                <i v-else class="el-icon-user-solid"></i>-->
<!--              </div>-->

<!--              <div class="user-info">-->
<!--                <div class="user-name">{{ user.realName }}</div>-->
<!--                <div class="user-account">{{ user.account }}</div>-->
<!--              </div>-->

<!--              <div class="user-actions">-->
<!--                <el-tooltip-->
<!--                  v-if="selectedUsers.includes(user.userId) && leaderId !== user.userId"-->
<!--                  content="设为负责人"-->
<!--                  placement="top">-->
<!--                  <el-button-->
<!--                    size="mini"-->
<!--                    type="primary"-->
<!--                    circle-->
<!--                    @click.stop="setLeader(user.userId)"-->
<!--                    class="leader-btn">-->
<!--                    <i class="el-icon-star-off"></i>-->
<!--                  </el-button>-->
<!--                </el-tooltip>-->

<!--                <el-tag-->
<!--                  v-if="leaderId === user.userId"-->
<!--                  type="danger"-->
<!--                  size="small"-->
<!--                  effect="dark"-->
<!--                  class="leader-tag">-->
<!--                  负责人-->
<!--                </el-tag>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->

<!--          <div class="selection-info">-->
<!--            <div class="selected-count">-->
<!--              已选择: {{ selectedUsers.length }} 人-->
<!--              <span v-if="leaderId" class="leader-info"> | 负责人: {{ getLeaderName() }}</span>-->
<!--            </div>-->
<!--            <div class="selection-hint">-->
<!--              点击选择/取消选择人员，选中后可设为负责人-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->

<!--      &lt;!&ndash; 时间选择器 &ndash;&gt;-->
<!--      <div class="form-item">-->
<!--        <label class="form-label">任务时间</label>-->
<!--        <div class="time-picker-group">-->
<!--          <div class="time-picker-item">-->
<!--            <span class="time-label">开始时间</span>-->
<!--            <el-date-picker-->
<!--              v-model="startTime"-->
<!--              type="datetime"-->
<!--              placeholder="选择开始时间"-->
<!--              value-format="yyyy-MM-dd HH:mm:ss"-->
<!--              size="small"-->
<!--              style="width: 100%">-->
<!--            </el-date-picker>-->
<!--          </div>-->

<!--          <div class="time-picker-item">-->
<!--            <span class="time-label">结束时间</span>-->
<!--            <el-date-picker-->
<!--              v-model="endTime"-->
<!--              type="datetime"-->
<!--              placeholder="选择结束时间"-->
<!--              value-format="yyyy-MM-dd HH:mm:ss"-->
<!--              size="small"-->
<!--              style="width: 100%">-->
<!--            </el-date-picker>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->

<!--      &lt;!&ndash; 操作按钮 &ndash;&gt;-->
<!--      <div class="action-buttons">-->
<!--        <el-button @click="$emit('close')" size="small">取消</el-button>-->
<!--        <el-button-->
<!--          type="primary"-->
<!--          @click="submitTask"-->
<!--          size="small"-->
<!--          :loading="loading"-->
<!--          :disabled="!isFormValid">-->
<!--          下发任务-->
<!--        </el-button>-->
<!--      </div>-->
<!--    </div>-->
<!--  </border>-->
<!--</template>-->

<!--<script>-->
<!--import border from "@/views/formShortLink/border/index.vue";-->
<!--import { addGroup } from "@/api/group"; // 假设您已经将接口命名为addGroup-->

<!--export default {-->
<!--  name: 'collaborationGroup',-->
<!--  props: ['collaIds'],-->
<!--  components: { border },-->
<!--  data() {-->
<!--    return {-->
<!--      taskTitle: '',      // 任务标题-->
<!--      taskContent: '',    // 任务内容-->
<!--      startTime: '',      // 开始时间-->
<!--      endTime: '',        // 结束时间-->
<!--      selectedUsers: [],  // 选中的用户ID列表-->
<!--      leaderId: null,     // 负责人ID-->
<!--      users: [],          // 用户列表-->
<!--      loading: false      // 加载状态-->
<!--    }-->
<!--  },-->
<!--  computed: {-->
<!--    // 表单验证-->
<!--    isFormValid() {-->
<!--      return this.taskTitle.trim() &&-->
<!--        this.taskContent.trim() &&-->
<!--        this.selectedUsers.length > 0 &&-->
<!--        this.leaderId &&-->
<!--        this.startTime &&-->
<!--        this.endTime &&-->
<!--        new Date(this.startTime) <= new Date(this.endTime);-->
<!--    }-->
<!--  },-->
<!--  created() {-->
<!--    console.log('collaIdsgroup:', this.collaIds)-->
<!--    // 初始化用户列表-->
<!--    if (this.collaIds && Array.isArray(this.collaIds)) {-->
<!--      this.users = this.collaIds;-->
<!--      // 默认选中所有用户-->
<!--      this.selectedUsers = this.users.map(user => user.userId);-->
<!--      // 默认设置第一个用户为负责人-->
<!--      if (this.users.length > 0) {-->
<!--        this.leaderId = this.users[0].userId;-->
<!--      }-->
<!--    }-->
<!--  },-->
<!--  methods: {-->
<!--    // 切换用户选择-->
<!--    toggleUserSelection(userId) {-->
<!--      const index = this.selectedUsers.indexOf(userId);-->
<!--      if (index > -1) {-->
<!--        // 如果已选中，则取消选中-->
<!--        this.selectedUsers.splice(index, 1);-->
<!--        // 如果取消的是负责人，则清空负责人-->
<!--        if (this.leaderId === userId) {-->
<!--          this.leaderId = null;-->
<!--          // 如果还有其他选中的用户，设置第一个为负责人-->
<!--          if (this.selectedUsers.length > 0) {-->
<!--            this.leaderId = this.selectedUsers[0];-->
<!--          }-->
<!--        }-->
<!--      } else {-->
<!--        // 如果未选中，则添加到选中列表-->
<!--        this.selectedUsers.push(userId);-->
<!--        // 如果没有负责人，设置这个用户为负责人-->
<!--        if (!this.leaderId) {-->
<!--          this.leaderId = userId;-->
<!--        }-->
<!--      }-->
<!--    },-->

<!--    // 设置负责人-->
<!--    setLeader(userId) {-->
<!--      // 如果该用户未被选中，先将其加入选中列表-->
<!--      if (!this.selectedUsers.includes(userId)) {-->
<!--        this.selectedUsers.push(userId);-->
<!--      }-->
<!--      this.leaderId = userId;-->
<!--    },-->

<!--    // 获取负责人姓名-->
<!--    getLeaderName() {-->
<!--      const leader = this.users.find(user => user.userId === this.leaderId);-->
<!--      return leader ? leader.realName : '';-->
<!--    },-->

<!--    // 下发任务-->
<!--    async submitTask() {-->
<!--      // 验证必填项-->
<!--      if (!this.taskTitle.trim()) {-->
<!--        this.$message.warning('请输入任务标题');-->
<!--        return;-->
<!--      }-->

<!--      if (!this.taskContent.trim()) {-->
<!--        this.$message.warning('请输入任务内容');-->
<!--        return;-->
<!--      }-->

<!--      if (this.selectedUsers.length === 0) {-->
<!--        this.$message.warning('请至少选择一个用户');-->
<!--        return;-->
<!--      }-->

<!--      if (!this.leaderId) {-->
<!--        this.$message.warning('请选择负责人');-->
<!--        return;-->
<!--      }-->

<!--      if (!this.startTime || !this.endTime) {-->
<!--        this.$message.warning('请选择开始时间和结束时间');-->
<!--        return;-->
<!--      }-->

<!--      if (new Date(this.startTime) > new Date(this.endTime)) {-->
<!--        this.$message.warning('开始时间不能晚于结束时间');-->
<!--        return;-->
<!--      }-->

<!--      this.loading = true;-->

<!--      try {-->
<!--        // 构造任务数据-->
<!--        const taskData = {-->
<!--          userIds: this.selectedUsers.filter(id => id !== this.leaderId), // 普通用户（排除负责人）-->
<!--          managerIds: [this.leaderId], // 负责人-->
<!--          type: "协同任务",-->
<!--          text: this.taskTitle,-->
<!--          executionDate: new Date(this.endTime),-->
<!--          begindate: new Date(this.startTime),-->
<!--          enddate: new Date(this.endTime),-->
<!--          jobinfo: JSON.stringify({-->
<!--            option1: {-->
<!--              notes: this.taskTitle,-->
<!--              body: this.taskContent,-->
<!--              value: "任务反馈",-->
<!--              isphoto: "否"-->
<!--            }-->
<!--          }),-->
<!--          location: "", // 位置信息，根据需求可添加-->
<!--          resourcesId: this.generateResourceId() // 生成资源ID，可根据需求调整-->
<!--        };-->

<!--        // 调用批量添加接口-->
<!--        const response = await addGroup(taskData);-->

<!--        if (response.code === 200 || response.success) {-->
<!--          this.$message.success(`任务下发成功，共${this.selectedUsers.length}个用户`);-->
<!--          this.$emit('close');-->
<!--        } else {-->
<!--          this.$message.error('任务下发失败: ' + (response.message || '未知错误'));-->
<!--        }-->
<!--      } catch (error) {-->
<!--        console.error('任务下发失败:', error);-->
<!--        this.$message.error('任务下发失败，请重试');-->
<!--      } finally {-->
<!--        this.loading = false;-->
<!--      }-->
<!--    },-->

<!--    // 生成资源ID（可根据实际需求调整）-->
<!--    generateResourceId() {-->
<!--      return 'task-' + Date.now() + '-' + Math.random().toString(36).substr(2, 9);-->
<!--    }-->
<!--  }-->
<!--}-->
<!--</script>-->

<!--<style scoped lang="scss">-->
<!--.collaborPage {-->
<!--  display: flex;-->
<!--  flex-direction: column;-->
<!--  padding: 15px;-->
<!--  height: 100%;-->
<!--  box-sizing: border-box;-->

<!--  .form-item {-->
<!--    margin-bottom: 16px;-->

<!--    .form-label {-->
<!--      display: block;-->
<!--      margin-bottom: 6px;-->
<!--      font-weight: 600;-->
<!--      color: #303133;-->
<!--      font-size: 14px;-->
<!--    }-->
<!--  }-->

<!--  .user-selector {-->
<!--    border: 1px solid #DCDFE6;-->
<!--    border-radius: 4px;-->
<!--    background-color: #F8FBFD;-->

<!--    .user-list {-->
<!--      max-height: 200px;-->
<!--      overflow-y: auto;-->
<!--      padding: 8px;-->

<!--      .user-item {-->
<!--        display: flex;-->
<!--        align-items: center;-->
<!--        padding: 8px 12px;-->
<!--        margin-bottom: 6px;-->
<!--        border-radius: 4px;-->
<!--        cursor: pointer;-->
<!--        transition: all 0.3s;-->
<!--        border: 1px solid transparent;-->

<!--        &:hover {-->
<!--          background-color: #f0f7ff;-->
<!--          border-color: #c6e2ff;-->
<!--        }-->

<!--        &.selected {-->
<!--          background-color: #e6f7ff;-->
<!--          border-color: #91d5ff;-->
<!--        }-->

<!--        &.leader {-->
<!--          background-color: #fff2f0;-->
<!--          border-color: #ffccc7;-->
<!--        }-->

<!--        .user-avatar {-->
<!--          width: 36px;-->
<!--          height: 36px;-->
<!--          border-radius: 50%;-->
<!--          background-color: #f0f2f5;-->
<!--          display: flex;-->
<!--          align-items: center;-->
<!--          justify-content: center;-->
<!--          margin-right: 12px;-->
<!--          overflow: hidden;-->

<!--          img {-->
<!--            width: 100%;-->
<!--            height: 100%;-->
<!--            object-fit: cover;-->
<!--          }-->

<!--          i {-->
<!--            font-size: 20px;-->
<!--            color: #00afff;-->
<!--          }-->
<!--        }-->

<!--        .user-info {-->
<!--          flex: 1;-->

<!--          .user-name {-->
<!--            font-weight: 500;-->
<!--            color: #303133;-->
<!--            margin-bottom: 2px;-->
<!--          }-->

<!--          .user-account {-->
<!--            font-size: 12px;-->
<!--            color: #909399;-->
<!--          }-->
<!--        }-->

<!--        .user-actions {-->
<!--          .leader-btn {-->
<!--            background-color: #ff4d4f;-->
<!--            border-color: #ff4d4f;-->

<!--            &:hover {-->
<!--              background-color: #ff7875;-->
<!--              border-color: #ff7875;-->
<!--            }-->

<!--            i {-->
<!--              font-size: 12px;-->
<!--            }-->
<!--          }-->

<!--          .leader-tag {-->
<!--            margin-left: 8px;-->
<!--          }-->
<!--        }-->
<!--      }-->
<!--    }-->

<!--    .selection-info {-->
<!--      border-top: 1px solid #e8e8e8;-->
<!--      padding: 10px 12px;-->
<!--      background-color: #fff;-->
<!--      border-radius: 0 0 4px 4px;-->

<!--      .selected-count {-->
<!--        font-size: 13px;-->
<!--        color: #606266;-->
<!--        margin-bottom: 4px;-->

<!--        .leader-info {-->
<!--          color: #ff4d4f;-->
<!--          font-weight: 500;-->
<!--        }-->
<!--      }-->

<!--      .selection-hint {-->
<!--        font-size: 12px;-->
<!--        color: #909399;-->
<!--      }-->
<!--    }-->
<!--  }-->

<!--  .time-picker-group {-->
<!--    .time-picker-item {-->
<!--      margin-bottom: 10px;-->

<!--      &:last-child {-->
<!--        margin-bottom: 0;-->
<!--      }-->

<!--      .time-label {-->
<!--        display: block;-->
<!--        margin-bottom: 4px;-->
<!--        font-size: 13px;-->
<!--        color: #606266;-->
<!--      }-->
<!--    }-->
<!--  }-->

<!--  .action-buttons {-->
<!--    display: flex;-->
<!--    justify-content: flex-end;-->
<!--    margin-top: auto;-->
<!--    padding-top: 15px;-->

<!--    .el-button {-->
<!--      margin-left: 10px;-->
<!--      min-width: 80px;-->
<!--    }-->
<!--  }-->
<!--}-->

<!--// 滚动条样式-->
<!--.user-list::-webkit-scrollbar {-->
<!--  width: 6px;-->
<!--}-->

<!--.user-list::-webkit-scrollbar-track {-->
<!--  background: #f1f1f1;-->
<!--  border-radius: 3px;-->
<!--}-->

<!--.user-list::-webkit-scrollbar-thumb {-->
<!--  background: #c1c1c1;-->
<!--  border-radius: 3px;-->
<!--}-->

<!--.user-list::-webkit-scrollbar-thumb:hover {-->
<!--  background: #a8a8a8;-->
<!--}-->
<!--</style>-->
<template>
  <border title="协同任务" :close="true" w="420px" h="650px" @close="$emit('close')" style="left: 630px;top:14%">
    <div class="collaborPage">
      <!-- 任务标题 -->
      <div class="form-item">
        <label class="form-label">任务标题</label>
        <el-input
          v-model="taskTitle"
          placeholder="请输入任务标题"
          clearable
          size="small">
        </el-input>
      </div>

      <!-- 任务内容 -->
      <div class="form-item">
        <label class="form-label">任务内容</label>
        <el-input
          v-model="taskContent"
          type="textarea"
          :rows="3"
          placeholder="请输入详细的任务内容"
          resize="none"
          size="small">
        </el-input>
      </div>

      <!-- 用户选择列表 -->
      <div class="form-item">
        <label class="form-label">参与人员</label>
        <div class="user-selector">
          <div class="user-list">
            <div
              class="user-item"
              v-for="user in users"
              :key="user.userId"
              :class="{
                selected: selectedUsers.includes(user.userId),
                leader: leaderIds.includes(user.userId)
              }"
              @click="toggleUserSelection(user.userId)">

              <div class="user-avatar">
<!--                <img-->
<!--                  v-if="user.headIcon"-->
<!--                  :src="user.headIcon"-->
<!--                  :alt="user.realName"-->
<!--                  onerror="this.src=''">-->
                <i  class="el-icon-user-solid"></i>
              </div>

              <div class="user-info">
                <div class="user-name">{{ user.realName }}</div>
                <div class="user-account">{{ user.account }}</div>
              </div>

              <div class="user-actions">
                <el-tooltip
                  v-if="selectedUsers.includes(user.userId)"
                  :content="leaderIds.includes(user.userId) ? '取消负责人' : '设为负责人'"
                  placement="top">
                  <el-button
                    size="mini"
                    :type="leaderIds.includes(user.userId) ? 'danger' : 'primary'"
                    circle
                    @click.stop="toggleLeader(user.userId)"
                    class="leader-btn">
                    <i :class="leaderIds.includes(user.userId) ? 'el-icon-star-on' : 'el-icon-star-off'"></i>
                  </el-button>
                </el-tooltip>

                <el-tag
                  v-if="leaderIds.includes(user.userId)"
                  size="small"
                  type="warning"
                  color="#FAA658"
                  effect="dark"
                  class="leader-tag">
                  负责人
                </el-tag>
              </div>
            </div>
          </div>

          <div class="selection-info">
            <div class="selected-count">
              已选择: {{ selectedUsers.length }} 人
              <span v-if="leaderIds.length > 0" class="leader-info"> | 负责人: {{ leaderIds.length }} 人</span>
            </div>
            <div class="selection-hint">
              点击选择/取消选择人员，选中后点击右侧按钮可设为负责人
            </div>
          </div>
        </div>
      </div>

      <!-- 时间选择器 -->
      <div class="form-item">
        <label class="form-label">任务时间</label>
        <div class="time-picker-group">
          <div class="time-picker-item">
            <span class="time-label">开始时间</span>
            <el-date-picker
              v-model="startTime"
              type="datetime"
              placeholder="选择开始时间"
              value-format="yyyy-MM-dd HH:mm:ss"
              size="small"
              style="width: 100%">
            </el-date-picker>
          </div>

          <div class="time-picker-item">
            <span class="time-label">结束时间</span>
            <el-date-picker
              v-model="endTime"
              type="datetime"
              placeholder="选择结束时间"
              value-format="yyyy-MM-dd HH:mm:ss"
              size="small"
              style="width: 100%">
            </el-date-picker>
          </div>
        </div>
      </div>

      <!-- 操作按钮 -->
      <div class="action-buttons">
        <el-button @click="$emit('close')" size="small">取消</el-button>
        <el-button
          type="primary"
          @click="submitTask"
          size="small"
          :loading="loading"
          :disabled="!isFormValid">
          下发任务
        </el-button>
      </div>
    </div>
  </border>
</template>

<script>
import border from "@/views/formShortLink/border/index.vue";
import { addGroup } from "@/api/group"; // 假设您已经将接口命名为addGroup

export default {
  name: 'collaborationGroup',
  props: ['collaIds'],
  components: { border },
  data() {
    const today = new Date();
    const tomorrow = new Date(today);
    tomorrow.setDate(tomorrow.getDate() + 1);

    const formatDate = (date) => {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      const hours = String(date.getHours()).padStart(2, '0');
      const minutes = String(date.getMinutes()).padStart(2, '0');
      const seconds = String(date.getSeconds()).padStart(2, '0');
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    };

    return {
      taskTitle: '',      // 任务标题
      taskContent: '',    // 任务内容
      startTime: formatDate(today),
      endTime: formatDate(tomorrow),     // 结束时间
      selectedUsers: [],  // 选中的用户ID列表
      leaderIds: [],      // 负责人ID数组（支持多个负责人）
      users: [],          // 用户列表
      loading: false      // 加载状态
    }
  },
  computed: {
    // 表单验证
    isFormValid() {
      return this.taskTitle.trim() &&
        this.taskContent.trim() &&
        this.selectedUsers.length > 0 &&
        this.leaderIds.length > 0 &&
        this.startTime &&
        this.endTime &&
        new Date(this.startTime) <= new Date(this.endTime);
    }
  },
  created() {
    // 初始化用户列表
    if (this.collaIds && Array.isArray(this.collaIds)) {
      this.users = this.collaIds;
      // 默认选中所有用户
      this.selectedUsers = this.users.map(user => user.userId);
      // 默认设置第一个用户为负责人
      if (this.users.length > 0) {
        this.leaderIds = [this.users[0].userId];
      }
    }
  },
  methods: {
    // 切换用户选择
    toggleUserSelection(userId) {
      const index = this.selectedUsers.indexOf(userId);
      if (index > -1) {
        // 如果已选中，则取消选中
        this.selectedUsers.splice(index, 1);
        // 如果取消的是负责人，则从负责人列表中移除
        const leaderIndex = this.leaderIds.indexOf(userId);
        if (leaderIndex > -1) {
          this.leaderIds.splice(leaderIndex, 1);
        }
      } else {
        // 如果未选中，则添加到选中列表
        this.selectedUsers.push(userId);
      }
    },

    // 切换负责人状态
    toggleLeader(userId) {
      const index = this.leaderIds.indexOf(userId);
      if (index > -1) {
        // 如果已经是负责人，则取消负责人
        this.leaderIds.splice(index, 1);
      } else {
        // 如果不是负责人，则添加为负责人
        this.leaderIds.push(userId);
      }
    },

    // 下发任务
    async submitTask() {
      // 验证必填项
      if (!this.taskTitle.trim()) {
        this.$message.warning('请输入任务标题');
        return;
      }

      if (!this.taskContent.trim()) {
        this.$message.warning('请输入任务内容');
        return;
      }

      if (this.selectedUsers.length === 0) {
        this.$message.warning('请至少选择一个用户');
        return;
      }

      if (this.leaderIds.length === 0) {
        this.$message.warning('请至少选择一个负责人');
        return;
      }

      if (!this.startTime || !this.endTime) {
        this.$message.warning('请选择开始时间和结束时间');
        return;
      }

      if (new Date(this.startTime) > new Date(this.endTime)) {
        this.$message.warning('开始时间不能晚于结束时间');
        return;
      }

      this.loading = true;

      try {
        // 构造任务数据
        // 普通用户 = 所有选中用户 - 负责人
        const normalUserIds = this.selectedUsers.filter(
          id => !this.leaderIds.includes(id)
        );

        const taskData = {
          userIds: normalUserIds, // 普通用户（排除负责人）
          managerIds: this.leaderIds, // 负责人数组
          type: "协同任务",
          text: this.taskTitle,
          executionDate: new Date(this.endTime),
          begindate: new Date(this.startTime),
          enddate: new Date(this.endTime),
          jobinfo: JSON.stringify({
            option1: {
              notes: this.taskTitle,
              body: this.taskContent,
              value: "任务反馈",
              isphoto: "否"
            }
          }),
          location: "", // 位置信息，根据需求可添加
          // resourcesId: this.generateResourceId() // 生成资源ID
        };

        // 调用批量添加接口
        const response = await addGroup(taskData);

        if (response.code === 200 || response.success) {
          this.$message.success(`任务下发成功，共${this.selectedUsers.length}个用户，其中${this.leaderIds.length}个负责人`);
          this.$emit('close');
        } else {
          this.$message.error('任务下发失败: ' + (response.message || '未知错误'));
        }
      } catch (error) {
        console.error('任务下发失败:', error);
        this.$message.error('任务下发失败，请重试');
      } finally {
        this.loading = false;
      }
    },

    // 生成资源ID
    generateResourceId() {
      return 'task-' + Date.now() + '-' + Math.random().toString(36).substr(2, 9);
    }
  }
}
</script>

<style scoped lang="scss">
.collaborPage {
  display: flex;
  flex-direction: column;
  padding: 15px;
  height: 100%;
  box-sizing: border-box;

  .form-item {
    margin-bottom: 16px;

    .form-label {
      display: block;
      margin-bottom: 6px;
      font-weight: 600;
      color: #303133;
      font-size: 14px;
    }
  }

  .user-selector {
    border: 1px solid #DCDFE6;
    border-radius: 4px;
    background-color: #F8FBFD;

    .user-list {
      max-height: 150px; /* 缩小用户列表高度 */
      overflow-y: auto;
      padding: 6px; /* 减小内边距 */

      .user-item {
        display: flex;
        align-items: center;
        padding: 6px 10px; /* 减小内边距 */
        margin-bottom: 4px; /* 减小间距 */
        border-radius: 4px;
        cursor: pointer;
        transition: all 0.3s;
        border: 1px solid transparent;

        &:hover {
          background-color: #f0f7ff;
          border-color: #c6e2ff;
        }

        &.selected {
          background-color: #e6f7ff;
          border-color: #91d5ff;
        }

        &.leader {
          background-color: #fff4f0;
          border-color: #FAA658;
        }

        .user-avatar {
          width: 22px; /* 缩小头像尺寸 */
          height: 22px;
          border-radius: 50%;
          background-color: #f0f2f5;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 10px; /* 减小间距 */
          overflow: hidden;
          flex-shrink: 0; /* 防止头像被压缩 */

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }

          i {
            font-size: 18px; /* 减小图标尺寸 */
            color: #00afff;
          }
        }

        .user-info {
          flex: 1;
          min-width: 0; /* 防止文本溢出 */

          .user-name {
            font-weight: 500;
            color: #303133;
            margin-bottom: 1px; /* 减小间距 */
            font-size: 13px; /* 减小字体 */
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }

          .user-account {
            font-size: 11px; /* 减小字体 */
            color: #909399;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }

        .user-actions {
          flex-shrink: 0; /* 防止操作按钮被压缩 */
          display: flex;
          align-items: center;

          .leader-btn {
            padding: 4px;
            width: 24px; /* 固定宽度 */
            height: 24px;

            i {
              font-size: 12px;
            }
          }

          .leader-tag {
            margin-left: 6px; /* 减小间距 */
            font-size: 10px; /* 减小字体 */
            padding: 0 4px;
            height: 18px;
            line-height: 18px;
          }
        }
      }
    }

    .selection-info {
      border-top: 1px solid #e8e8e8;
      padding: 8px 10px; /* 减小内边距 */
      background-color: #fff;
      border-radius: 0 0 4px 4px;

      .selected-count {
        font-size: 12px; /* 减小字体 */
        color: #4d84f5;
        margin-bottom: 3px; /* 减小间距 */

        .leader-info {
          color: #FAA658;
          font-weight: 500;
        }
      }

      .selection-hint {
        font-size: 11px; /* 减小字体 */
        color: #909399;
      }
    }
  }

  .time-picker-group {
    .time-picker-item {
      margin-bottom: 10px;

      &:last-child {
        margin-bottom: 0;
      }

      .time-label {
        display: block;
        margin-bottom: 4px;
        font-size: 13px;
        color: #606266;
      }
    }
  }

  .action-buttons {
    display: flex;
    justify-content: flex-end;
    margin-top: auto;
    padding-top: 15px;

    .el-button {
      margin-left: 10px;
      min-width: 80px;
    }
  }
}

// 滚动条样式
.user-list::-webkit-scrollbar {
  width: 4px; /* 减小滚动条宽度 */
}

.user-list::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 2px;
}

.user-list::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 2px;
}

.user-list::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}
</style>
